<template>
  <div class="page">
      <page-head></page-head>
      <page-nav headIndex="0"></page-nav>
      <main>
        <div class="banner">
          <div class="lb-banner"><img src="../../assets/img/index/banner.jpg" alt=""></div>
        </div>
        <div class="placard-item flex">
          <div class="swiper-container placard-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in placard.swiper" :key="index">
                <img :src="item" alt="">
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
          <div class="notice-item">
            <h2 class="flex flexAtcent">通知公告</h2>
            <div class="list">
              <div class="_li flex" v-for="(item, index) in placard.list" :key="index">
                <p v-text="item.name"></p>
                <span v-text="item.time"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="news-item">
          <div class="title flex flexAtcent">
            <h2 class="flex flexAtcent flexJcent">动态新闻</h2>
            <p class="flex flexAtcent flexJcent">活动报名</p>
          </div>
          <div class="centent flex">
            <div class="list">
              <div class="_li flex" v-for="(item, index) in news.list" :key="index">
                <p v-text="item.name"></p>
                <span v-text="item.time"></span>
              </div>
            </div>
            <div class="swiper-container news-swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in news.swiper" :key="index">
                  <img :src="item.pic" alt="">
                  <p class="flex flexAtcent flexJcent" v-text="item.name"></p>
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
        <div class="bar"><img src="../../assets/img/index/bar-pic.jpg" alt=""></div>
        <div class="recommend-item">
          <h2 class="flex flexAtcent">新书推荐</h2>
          <div class="list">
            <div class="swiper-container recommend-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in recommend" :key="index">
                <div class="item flex flexAtcent">
                  <div class="_li flex" v-for="(item, index) in item.list" :key="index">
                    <div class="pic"><img :src="item.pic" alt=""></div>
                    <div class="user-info flex flexJcent">
                      <h5 v-text="item.name"></h5>
                      <div class="info">
                        <p>作者：{{item.user}}</p>
                        <p>出版时间：{{item.date}}</p>
                        <p>简介：{{item.centent}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
          </div>
        </div>
        <page-foot></page-foot>
      </main>
  </div>
</template>

<script>
import pageHead from '@/assets/header'
import pageFoot from '@/assets/footer'
import pageNav from '@/assets/nav'
import Swiper from 'swiper'
export default {
  components: { pageHead, pageNav, pageFoot },
  data () {
    return {
      placard: {
        swiper: [
          require('../../assets/img/index/placard-icon.jpg'),
          require('../../assets/img/index/placard-icon.jpg'),
          require('../../assets/img/index/placard-icon.jpg')
        ],
        list: [
          {
            name: '565个经典作品颂新中国70年',
            time: '2019-09-25'
          }, {
            name: '市图书馆成功举办南平市“国际聋人节” 手机摄影知识讲座',
            time: '2019-09-23'
          }, {
            name: '市图书馆组织干部职工观看第七届道德模范颁奖仪式',
            time: '2019-09-18'
          }, {
            name: '“桔灯闪耀月圆夜 中秋非遗小课堂”顺利举办',
            time: '2019-09-15'
          }, {
            name: '市图书馆组织干部职工观看电影《樵夫•廖俊波》',
            time: '2019-09-04'
          }, {
            name: '市图书馆党支部开展 “传承红色基因，牢记初心使命”主...',
            time: '2019-09-04'
          }, {
            name: '“桔灯闪耀月圆夜 中秋非遗小课堂”顺利举办',
            time: '2019-09-15'
          }
        ]
      },
      news: {
        list: [
          {
            name: '565个经典作品颂新中国70年',
            time: '2019-09-25'
          }, {
            name: '市图书馆成功举办南平市“国际聋人节” 手机摄影知识讲座',
            time: '2019-09-23'
          }, {
            name: '市图书馆组织干部职工观看第七届道德模范颁奖仪式',
            time: '2019-09-18'
          }, {
            name: '“桔灯闪耀月圆夜 中秋非遗小课堂”顺利举办',
            time: '2019-09-15'
          }, {
            name: '市图书馆组织干部职工观看电影《樵夫•廖俊波》',
            time: '2019-09-04'
          }, {
            name: '市图书馆党支部开展 “传承红色基因，牢记初心使命”主...',
            time: '2019-09-04'
          }, {
            name: '“桔灯闪耀月圆夜 中秋非遗小课堂”顺利举办',
            time: '2019-09-15'
          }
        ],
        swiper: [
          {
            pic: require('../../assets/img/index/new-pic.jpg'),
            name: '图书馆外景1'
          }, {
            pic: require('../../assets/img/index/new-pic.jpg'),
            name: '图书馆外景2'
          }, {
            pic: require('../../assets/img/index/new-pic.jpg'),
            name: '图书馆外景3'
          }
        ]
      },
      recommend: [
        {
          list: [
            {
              pic: require('../../assets/img/index/recommend-pic1.jpg'),
              name: '中国文化产业地图',
              user: '李季主编',
              date: '2014-06-19',
              centent: '《中国文化产业地图》主要介绍了中国文化产业的战略布局和总体格局(包括我国文化产业发展的战略布局原则、文化产业发展的战略重点、文'
            }, {
              pic: require('../../assets/img/index/recommend-pic2.jpg'),
              name: '中国文化产业地图',
              user: '李季主编',
              date: '2014-06-19',
              centent: '《中国文化产业地图》主要介绍了中国文化产业的战略布局和总体格局(包括我国文化产业发展的战略布局原则、文化产业发展的战略重点、文'
            }, {
              pic: require('../../assets/img/index/recommend-pic3.jpg'),
              name: '中国文化产业地图',
              user: '李季主编',
              date: '2014-06-19',
              centent: '《中国文化产业地图》主要介绍了中国文化产业的战略布局和总体格局(包括我国文化产业发展的战略布局原则、文化产业发展的战略重点、文'
            }
          ]
        }, {
          list: [
            {
              pic: require('../../assets/img/index/recommend-pic1.jpg'),
              name: '中国文化产业地图',
              user: '李季主编',
              date: '2014-06-19',
              centent: '《中国文化产业地图》主要介绍了中国文化产业的战略布局和总体格局(包括我国文化产业发展的战略布局原则、文化产业发展的战略重点、文'
            }, {
              pic: require('../../assets/img/index/recommend-pic2.jpg'),
              name: '中国文化产业地图',
              user: '李季主编',
              date: '2014-06-19',
              centent: '《中国文化产业地图》主要介绍了中国文化产业的战略布局和总体格局(包括我国文化产业发展的战略布局原则、文化产业发展的战略重点、文'
            }, {
              pic: require('../../assets/img/index/recommend-pic3.jpg'),
              name: '中国文化产业地图',
              user: '李季主编',
              date: '2014-06-19',
              centent: '《中国文化产业地图》主要介绍了中国文化产业的战略布局和总体格局(包括我国文化产业发展的战略布局原则、文化产业发展的战略重点、文'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.placardSwiper()
    this.newsSwiper()
    this.recommendSwiper()
  },
  methods: {
    placardSwiper () {
      // eslint-disable-next-line no-new
      new Swiper('.placard-swiper', {
        loop: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },
    newsSwiper () {
      // eslint-disable-next-line no-new
      new Swiper('.news-swiper', {
        loop: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },
    recommendSwiper () {
      // eslint-disable-next-line no-new
      new Swiper('.recommend-swiper', {
        loop: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
main {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 124px;
  overflow-x: auto;
  overflow-y: auto;
  min-width: 1180px;
  .banner {
    min-width: 1180px;
    height: 434px;
    position: relative;
    overflow: hidden;
    .lb-banner {
      position: absolute;
      width: 1920px;
      left: 50%;
      margin-left: -960px;
    }
  }
  .placard-item {
    width: 1180px;
    justify-content: space-between;
    margin-top: 21px;
    margin-left: auto;
    margin-right: auto;
    .swiper-container {
      width: 676px;
      .swiper-pagination {
        right: 20px;
        bottom: 20px;
        left: auto;
        width: auto;
        /deep/ .swiper-pagination-bullet {
          width: 12px;
          height: 12px;
          background: #fff;
          margin-left: 5px;
          margin-right: 0;
          opacity: 1;
          border-radius: 0;
          &.swiper-pagination-bullet-active {
            background: #5c5c5c;
          }
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
    .notice-item {
      width: 482px;
      h2 {
        height: 42px;
        font-size: 18px;
        color: #459428;
        position: relative;
        &::after {
          content: '';
          width: 76px;
          height: 3px;
          background: #459428;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
      .list {
        margin-top: 20px;
        ._li {
          height: 36px;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          color: #323232;
          cursor: pointer;
        }
      }
    }
  }
  .news-item {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 26px;
    .title {
      height: 42px;
      border-bottom: 1px solid #49a328;
      h2 {
        height: 100%;
        width: 160px;
        background: #49a328;
        font-size: 18px;
        color: #ffffff;
        border-radius: 10px 10px 0 0;
      }
      p {
        width: 290px;
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }
    }
    .centent {
      justify-content: space-between;
      .list {
        width: 655px;
        margin-top: 25px;
        ._li {
          height: 36px;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          color: #323232;
          cursor: pointer;
        }
      }
      .news-swiper {
        width: 494px;
        margin-top: 25px;
        margin-left: 31px;
        .swiper-slide {
          p {
            height: 40px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
            font-size: 14px;
            color: #ffffff;
          }
        }
        .swiper-pagination {
          right: 10px;
          bottom: 45px;
          left: auto;
          width: auto;
          /deep/ .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: #fff;
            margin-left: 5px;
            margin-right: 0;
            opacity: 1;
            border-radius: 0;
            &.swiper-pagination-bullet-active {
              background: #5c5c5c;
            }
            &:first-child {
              margin-left: 0;
            }
          }
        }
      }
    }
  }
  .bar {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 19px;
  }
  .recommend-item {
    h2 {
      height: 68px;
      font-size: 18px;
      color: #459428;
      width: 1180px;
      margin: 0 auto;
    }
    .list {
      height: 344px;
      background: #f2f2f2;
      display: flex;
      align-items: center;
      .item {
        justify-content: space-around;
        ._li {
          width: 423px;
          height: 260px;
          background: #fff;
          .pic {
            width: 190px;
          }
          .user-info {
            width: 190px;
            margin-left: 20px;
            flex-direction: column;
            h5 {
              font-size: 18px;
              color: #419621;
              font-weight: normal;
              margin-bottom: 15px;
            }
            p {
              font-size: 14px;
              color: #2b2b2b;
              margin-top: 5px;
              &:first-child {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
